<template>
  <div id="shop">
    <h3 class="topTitle">鸭鸭商城</h3>
    <banner-list />

    <ul class="left">
      <li @click="clickAction1"><i class="iconfont icon-dianying"></i><span>挂式空调</span></li>
      <li @click="clickAction2"><i class="iconfont icon-dianying"></i><span>空调外机</span></li>
      <li @click="clickAction3"><i class="iconfont icon-dianying"></i><span>中央空调</span></li>
      <li @click="clickAction4"><i class="iconfont icon-dianying"></i><span>立式空调</span></li>
      <li @click="clickAction5"><i class="iconfont icon-dianying"></i><span>壁挂炉</span></li>
    </ul> 

    <div class="right">
      <ul>
        <li v-for="item in data" :key="item.id">
          <img :src="item.airImage" alt="">
          <h1>{{item.title}}</h1>
          <p>￥{{item.price}}</p>
          <span>预约安装</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BannerList from "../components/shop/banner-list";
import axios from 'axios';
export default {
 name:'Shop',
 components:{
   BannerList,
 },

  data(){
    return{
      data:[]
    }
  },

 methods:{
   async clickAction1(){
     const {data:{data1}}=await axios.get('/data/shop.json');
     this.data=data1;
   },

   async clickAction2(){
     const {data:{data2}}=await axios.get('/data/shop.json');
     this.data=data2;

   },
   async clickAction3(){
     const {data:{data3}}=await axios.get('/data/shop.json');
     this.data=data3;
   },
   async clickAction4(){
     const {data:{data4}}=await axios.get('/data/shop.json');
     this.data=data4;

   },
   async clickAction5(){
     const {data:{data5}}=await axios.get('/data/shop.json');
     this.data=data5;

   },
 },


 async mounted(){
   const {data:{data1}}=await axios.get('/data/shop.json');
   this.data=data1;

   var list=document.querySelectorAll("li");
  //  console.log(list);
    list=Array.from(list);


    var prevIndex=0;

    list.forEach((item,index)=>{
      list[prevIndex].style.borderRight='none';
      item.onclick=function (){
        list[prevIndex].style.borderRight='1px solid #ccc';
        item.style.borderRight='none';
        prevIndex=index;
      }
    })
 }
}
</script>

<style scoped lang='scss'>
.topTitle{
  height: 45px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 45px;
}
#shop{
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  bottom: 50px;

  .left {
    width: 74px;
    height: 70px;
    float: left;
    li{
      width: 74px;
      height: 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 1px solid #ccc;
      border-top: none;
      color: #333;
      i{
        font-size: 34px;
        margin-bottom: 8px;
      }
    }
  }

  .right{
    width: 300px;
    height: 450px;
    float: left;
    // background: aqua;
    box-sizing: border-box;
    padding: 20px 15px;
    overflow-y: auto;
    li{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;
      color: #333;
    }
    img{
      width: 190px;
      height: 66px;
      margin-bottom: 7px;
    }
    h1{
      margin-bottom: 5px;
      font-size: 13px;
    }
    p{
      color: #C83522;
      font-size: 13px;
      margin-bottom: 8px;
    }
    span{
      display: inline-block;
      width: 100px;
      height: 26px;
      background: rgba(1, 135, 250, 1);
      text-align: center;
      line-height: 26px;
      border-radius: 13px;
      color: white;
    }
  }
}
</style>